<template>
  <div>
    <div id="container" style="height: 1000px" />
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      map: null,
      infoWindow: null
    }
  },
  created() {
    this.getMap()
  },
  methods: {
    getMap() {
      const p1 = new Promise((resolve, reject) => {
        const aMapScript = document.createElement('script')
        aMapScript.setAttribute(
          'src',
          'https://webapi.amap.com/maps?v=1.4.15&key=52a208e99a6c24ab60208167d15cb5db&plugin=AMap.MouseTool,AMap.PolyEditor'
        )
        document.head.appendChild(aMapScript)
        aMapScript.onload = function() {
          resolve(aMapScript)
        }
      })
      const p2 = new Promise((resolve, reject) => {
        const loca = document.createElement('script')
        loca.setAttribute('src', 'http://webapi.amap.com/loca?v=1.3.2&key=52a208e99a6c24ab60208167d15cb5db')
        document.head.appendChild(loca)
        loca.onload = function() {
          resolve(loca)
        }
      })
      Promise.all([p1, p2])
        .then((result) => {
          var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            zoom: 11,
            center: [103.687294, 31.196932],
            viewMode: '3D'
          })

          var layer = new Loca.RoundPointLayer({
            map: map,
            fitView: true
          })
          let a = [
            {
              lng: 105.005,
              lat: 32.349,
              lnglat: '105.005, 32.349',
              depth: 10,
              mag: 15,
              time: 1212640865530,
              title: 'M 5.2 - Sichuan-Gansu border region, China'
            },
            {
              lng: 104.602,
              lat: 32.067,
              lnglat: '104.602, 32.067',
              depth: 10,
              mag: 5,
              time: 1212462569360,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            {
              lng: 105.272,
              lat: 32.451,
              lnglat: '105.272, 32.451',
              depth: 10,
              mag: 5.2,
              time: 1211177214760,
              title: 'M 5.2 - Sichuan-Gansu border region, China'
            },
            {
              lng: 105.042,
              lat: 32.402,
              lnglat: '105.042, 32.402',
              depth: 10,
              mag: 5,
              time: 1211170138690,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            {
              lng: 104.982,
              lat: 32.24,
              lnglat: '104.982, 32.24',
              depth: 9,
              mag: 5.8,
              time: 1211044105480,
              title: 'M 5.8 - Sichuan-Gansu border region, China'
            },
            { lng: 103.665, lat: 31.29, lnglat: '103.665, 31.29', depth: 10, mag: 5, time: 1210969012190, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 103.351,
              lat: 31.355,
              lnglat: '103.351, 31.355',
              depth: 3,
              mag: 5.6,
              time: 1210915547320,
              title: 'M 5.6 - eastern Sichuan, China'
            },
            { lng: 104.214, lat: 31.66, lnglat: '104.214, 31.66', depth: 10, mag: 5.1, time: 1210798867000, title: 'M 5.1 - eastern Sichuan, China' },
            {
              lng: 104.014,
              lat: 31.356,
              lnglat: '104.014, 31.356',
              depth: 10,
              mag: 5.1,
              time: 1210757203950,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 104.032,
              lat: 31.996,
              lnglat: '104.032, 31.996',
              depth: 10,
              mag: 5.1,
              time: 1210744497980,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 103.518,
              lat: 31.325,
              lnglat: '103.518, 31.325',
              depth: 18.8,
              mag: 5.4,
              time: 1210733679980,
              title: 'M 5.4 - eastern Sichuan, China'
            },
            {
              lng: 105.275,
              lat: 32.416,
              lnglat: '105.275, 32.416',
              depth: 10,
              mag: 5,
              time: 1210663156260,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            { lng: 103.194, lat: 30.89, lnglat: '103.194, 30.89', depth: 9, mag: 5.8, time: 1210662428500, title: 'M 5.8 - eastern Sichuan, China' },
            { lng: 103.682, lat: 31.205, lnglat: '103.682, 31.205', depth: 10, mag: 5, time: 1210647638330, title: 'M 5.0 - eastern Sichuan, China' },
            { lng: 103.53, lat: 31.298, lnglat: '103.53, 31.298', depth: 10, mag: 5.1, time: 1210636486860, title: 'M 5.1 - eastern Sichuan, China' },
            {
              lng: 103.527,
              lat: 31.282,
              lnglat: '103.527, 31.282',
              depth: 10,
              mag: 5.2,
              time: 1210635978970,
              title: 'M 5.2 - eastern Sichuan, China'
            },
            {
              lng: 104.454,
              lat: 31.746,
              lnglat: '104.454, 31.746',
              depth: 32.7,
              mag: 5.3,
              time: 1210625134820,
              title: 'M 5.3 - eastern Sichuan, China'
            },
            {
              lng: 103.889,
              lat: 31.413,
              lnglat: '103.889, 31.413',
              depth: 21.7,
              mag: 5.6,
              time: 1210622930430,
              title: 'M 5.6 - eastern Sichuan, China'
            },
            {
              lng: 103.524,
              lat: 31.178,
              lnglat: '103.524, 31.178',
              depth: 34.8,
              mag: 5,
              time: 1210614875910,
              title: 'M 5.0 - eastern Sichuan, China'
            },
            { lng: 103.514, lat: 31.058, lnglat: '103.514, 31.058', depth: 10, mag: 5, time: 1210606133440, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 104.575,
              lat: 31.952,
              lnglat: '104.575, 31.952',
              depth: 10,
              mag: 5.1,
              time: 1210604939660,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 103.692,
              lat: 31.243,
              lnglat: '103.692, 31.243',
              depth: 17.4,
              mag: 5,
              time: 1210604731260,
              title: 'M 5.0 - eastern Sichuan, China'
            },
            {
              lng: 104.65,
              lat: 32.12,
              lnglat: '104.65, 32.12',
              depth: 18.3,
              mag: 5,
              time: 1210601727380,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            { lng: 103.511, lat: 31.028, lnglat: '103.511, 31.028', depth: 10, mag: 5, time: 1210599654130, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 103.618,
              lat: 31.214,
              lnglat: '103.618, 31.214',
              depth: 10,
              mag: 6.1,
              time: 1210590662480,
              title: 'M 6.1 - eastern Sichuan, China'
            },
            { lng: 103.365, lat: 30.966, lnglat: '103.365, 30.966', depth: 10, mag: 5, time: 1210587820080, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 104.092,
              lat: 31.527,
              lnglat: '104.092, 31.527',
              depth: 10,
              mag: 5.5,
              time: 1210585344860,
              title: 'M 5.5 - eastern Sichuan, China'
            },
            { lng: 103.682, lat: 31.206, lnglat: '103.682, 31.206', depth: 10, mag: 5, time: 1210583220430, title: 'M 5.0 - eastern Sichuan, China' },
            { lng: 104.052, lat: 31.503, lnglat: '104.052, 31.503', depth: 10, mag: 5, time: 1210580499930, title: 'M 5.0 - eastern Sichuan, China' },
            { lng: 103.53, lat: 31.1, lnglat: '103.53, 31.1', depth: 10, mag: 5, time: 1210579858350, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 103.625,
              lat: 31.243,
              lnglat: '103.625, 31.243',
              depth: 10,
              mag: 5.1,
              time: 1210577682540,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 105.134,
              lat: 32.165,
              lnglat: '105.134, 32.165',
              depth: 10,
              mag: 5,
              time: 1210575905390,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            {
              lng: 104.217,
              lat: 31.636,
              lnglat: '104.217, 31.636',
              depth: 10,
              mag: 5.3,
              time: 1210575694040,
              title: 'M 5.3 - eastern Sichuan, China'
            },
            {
              lng: 104.908,
              lat: 32.195,
              lnglat: '104.908, 32.195',
              depth: 10,
              mag: 5,
              time: 1210575642660,
              title: 'M 5.0 - Sichuan-Gansu border region, China'
            },
            { lng: 103.646, lat: 31.216, lnglat: '103.646, 31.216', depth: 10, mag: 5, time: 1210575628970, title: 'M 5.0 - eastern Sichuan, China' },
            {
              lng: 104.638,
              lat: 31.857,
              lnglat: '104.638, 31.857',
              depth: 10,
              mag: 5.1,
              time: 1210575454870,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 103.747,
              lat: 31.146,
              lnglat: '103.747, 31.146',
              depth: 10,
              mag: 5.3,
              time: 1210575258100,
              title: 'M 5.3 - eastern Sichuan, China'
            },
            {
              lng: 105.202,
              lat: 32.372,
              lnglat: '105.202, 32.372',
              depth: 10,
              mag: 5.1,
              time: 1210575210090,
              title: 'M 5.1 - Sichuan-Gansu border region, China'
            },
            {
              lng: 104.481,
              lat: 31.906,
              lnglat: '104.481, 31.906',
              depth: 10,
              mag: 5.1,
              time: 1210575036930,
              title: 'M 5.1 - eastern Sichuan, China'
            },
            {
              lng: 105.234,
              lat: 32.436,
              lnglat: '105.234, 32.436',
              depth: 10,
              mag: 5.3,
              time: 1210574939120,
              title: 'M 5.3 - Sichuan-Gansu border region, China'
            },
            {
              lng: 104.705,
              lat: 31.272,
              lnglat: '104.705, 31.272',
              depth: 10,
              mag: 5.4,
              time: 1210574637160,
              title: 'M 5.4 - eastern Sichuan, China'
            },
            {
              lng: 103.715,
              lat: 31.211,
              lnglat: '103.715, 31.211',
              depth: 10,
              mag: 5.8,
              time: 1210574594360,
              title: 'M 5.8 - eastern Sichuan, China'
            },
            {
              lng: 104.682,
              lat: 31.342,
              lnglat: '104.682, 31.342',
              depth: 10,
              mag: 5.7,
              time: 1210574528950,
              title: 'M 5.7 - eastern Sichuan, China'
            },
            {
              lng: 104.032,
              lat: 31.586,
              lnglat: '104.032, 31.586',
              depth: 10,
              mag: 5.7,
              time: 1210574516000,
              title: 'M 5.7 - eastern Sichuan, China'
            },
            {
              lng: 104.787,
              lat: 31.968,
              lnglat: '104.787, 31.968',
              depth: 10,
              mag: 5.2,
              time: 1210574486530,
              title: 'M 5.2 - eastern Sichuan, China'
            },
            {
              lng: 103.322,
              lat: 31.002,
              lnglat: '103.322, 31.002',
              depth: 19,
              mag: 7.9,
              time: 1210573681570,
              title: 'M 7.9 - eastern Sichuan, China'
            }
          ]
          layer.setData(a, {
            lnglat: 'lnglat'
          })
          layer.setOptions({
            style: {
              radius: {
                key: 'mag', // 映射字段
                scale: 'linear', // 比例尺
                value: [10, 50], // 输出范围
                input: [4, 8] // 输入范围
              },
              color: 'red',
              opacity: 0.8,
              borderWidth: 1,
              borderColor: '#86FFFD'
            }
          })

          layer.render()
        })
        .catch((error) => {
          //console.log(error)
        })
    }
  }
}
</script>

<style lang="scss"></style>
